<template>
  <div id="questionnaire-show" v-if="Object.keys(questionnaire).length">
    <router-view/>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import * as format from './format';

export default {
  name: 'QuestionnaireShow', // 问卷预览页面
  computed: {
    ...mapState({ questionnaire: 'currentQuestionnaire' }),
    // 当前问卷id
    qnId() { return this.$route.params.qnId; },
  },
  methods: {
    ...mapActions(['setCurrentQuestionnaire', 'removeCurrentQuestionnaire']),
    // 加载问卷数据
    loadQuestionnaire() {
      this.$api.questionnaires.show({ qnId: this.qnId })
        .then(res => this.setCurrentQuestionnaire(format.formatQuestionnaire(res.data)))
        .catch((err) => { if (err) this.goBack(); });
    },
  },
  created() { this.loadQuestionnaire(); },
  destroyed() { this.removeCurrentQuestionnaire(); },
  watch: {
    qnId() {
      this.removeCurrentQuestionnaire();
      this.loadQuestionnaire();
    },
  },
};
</script>

<style></style>
